<template>
	<view class="ai-loading-container" :class="[size == 'large' ? 'large' : 'small']">
		<!-- 主加载动画 -->
		<view class="ai-loader">
			<view class="orbit"></view>
			<view class="core">
				<!-- <image src="/static/ai-icon.png" class="ai-icon" /> -->
			</view>
			<view
				v-for="(particle, index) in particles"
				:key="index"
				class="particle"
				:style="{
					transform: `rotate(${index * 45}deg) translate(40px) rotate(-${index * 45}deg)`,
					animationDelay: `${index * 0.1}s`
				}"
			></view>
		</view>

		<!-- 动态文字提示 -->
		<text class="loading-text">{{ dynamicText }}</text>

		<!-- 底部进度条 -->
		<view class="progress-bar">
			<view class="progress" :style="{ width: progress + '%' }"></view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
	size: {
		type: String,
		default: 'large'
	}
});

const particles = ref(8);
const dynamicText = ref('分析图片中...');
const progress = ref(0);
const texts = ref(['检测图像特征...', '识别物体轮廓...', '优化画质处理中...', '应用AI滤镜...', '生成最终效果...']);

function startProgress() {
	const interval = setInterval(() => {
		progress.value += 0.6;
		if (progress.value >= 100) {
			clearInterval(interval);
		}
	}, 200);
}

function cycleText() {
	let index = 0;
	setInterval(() => {
		dynamicText.value = texts.value[index];
		if (index != 4) {
			index++;
		}
	}, 6000);
}

startProgress();
cycleText();
</script>

<style scoped lang="scss">
.small {
	.ai-loader {
		width: 20vw;
		height: 20vw;
		// margin-bottom: 2.5vw;
	}

	.core {
		width: 10vw;
		height: 10vw;
		box-shadow: 0 0 10px #00c6ff;
	}

	.ai-icon {
		width: 10vw;
		height: 10vw;
		filter: drop-shadow(0 0 5px white);
	}

	.particle {
		width: 2vw;
		height: 2vw;
		box-shadow: 0 0 2vw #00ffcc;
	}

	.loading-text {
		margin-top: 2.5vw;
		font-size: 2.5vw;
	}

	.progress-bar {
		width: 30vw;
		height: 1vw;
		margin-top: 3vw;
	}
}
.ai-loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ai-loader {
	position: relative;
	width: 40vw;
	height: 40vw;
	// margin-bottom: 5vw;
}

.orbit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid rgba(0, 255, 255, 0.3);
	border-radius: 50%;
	animation: orbit-spin 3s linear infinite;
}

.core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20vw;
	height: 20vw;
	background: #00c6ff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 20px #00c6ff;
}

.ai-icon {
	width: 10vw;
	height: 10vw;
	filter: drop-shadow(0 0 5px white);
}

.particle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4vw;
	height: 4vw;
	background: #00ffcc;
	border-radius: 50%;
	animation: pulse 1.5s infinite;
	box-shadow: 0 0 2vw #00ffcc;
}

.loading-text {
	margin-top: 5vw;
	font-size: 5vw;
	font-weight: 500;
	letter-spacing: 1px;
	text-align: center;
}

.progress-bar {
	width: 60vw;
	height: 1vw;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
	margin-top: 6vw;
	overflow: hidden;
}

.progress {
	height: 100%;
	background: linear-gradient(90deg, #00c6ff, #00ffcc);
	border-radius: 1vw;
	transition: width 0.3s ease;
}

/* 动画定义 */
@keyframes orbit-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1) translate(-30%, -30%);
		opacity: 1;
	}
	50% {
		transform: scale(1.8) translate(-30%, -30%);
		opacity: 0.3;
	}
	100% {
		transform: scale(1) translate(-30%, -30%);
		opacity: 1;
	}
}
</style>
